<template>
    <!-- 公共的联动配置 -->
    <div class="global-linkage">
        <ul>
            <li v-for="(item, index) in globalLinkageList" :key="index">
                <div class="first-level" v-show="item.linkageSetting.events.length">
                    <div class="left">
                        <el-icon class="el-right-icon"
                            ><ArrowRight v-if="!expandList[index].expand" @click="expandList[index].expand = !expandList[index].expand" />
                            <ArrowDown v-if="expandList[index].expand" @click="expandList[index].expand = !expandList[index].expand" />
                        </el-icon>

                        <i class="iconfont icon-a-icon-Largescreen"></i>

                        <span>主屏</span>
                        <el-icon><ArrowRight /> </el-icon>

                        {{ item.componentName }}
                    </div>

                    <el-select v-model="item.linkageSetting.action" class="select-area">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>

                <div v-for="(son, sonIndex) in item.linkageSetting.events" :key="sonIndex" v-show="expandList[index].expand">
                    <div class="item-one">
                        <div class="label-area">
                            <div class="circle"></div>
                            <i class="iconfont icon-a-icon-Largescreen"></i>
                            {{ pageConfig.name }} <el-icon><ArrowRight /> </el-icon>{{ son.label }}
                        </div>

                        <div class="item-operate-area">
                            <i class="iconfont icon-delete" @click="handleDeleteOneLink(item.id, item, sonIndex, son)" style="color: #c9cdd4"></i>
                            <i
                                class="iconfont icon-icon-correlation"
                                :style="{
                                    color: son.linkageStatus ? '#165DFF' : '#C9CDD4'
                                }"
                                @click="handleRelieveOneLink(item.id, item, sonIndex, son)"
                            ></i>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, reactive, computed, watch, toRefs } from 'vue';
import { flatList, getIdAndEditIt } from '@/utils/common';
import { ElMessage, ElMessageBox } from 'element-plus';

import useComponentConfig from '@/views/design-center/store/component-config';

const useComponentConfigStore = useComponentConfig();

const { pageConfig } = toRefs(useComponentConfigStore);

const options = [
    {
        label: '值变化',
        value: 'valueChange'
    },
    {
        label: '单击',
        value: 'click'
    }
];

// 将分组的的组件扁平化
const globalLinkageList = computed(() => {
    let arr = flatList(pageConfig.value.list)
        .map((item) => {
            return {
                id: item.id,
                ...item.setups
            };
        })
        .filter((item) => item.linkageSetting?.events?.length >= 1);
    console.log('将分组的的组件扁平化', arr);
    return reactive(arr);
});

const expandList = ref([]); //关联分组expand展开与否判定
const isFirstEnter = ref(false);
watch(
    () => globalLinkageList.value.length,
    () => {
        if (!isFirstEnter.value) {
            expandList.value = Array.from(new Array(globalLinkageList.value.length)).map(() => {
                return { expand: false };
            });
            isFirstEnter.value = true;
        }
    },
    {
        immediate: true
    }
);
/**
 * @description:删除联动关系
 * @return {*}
 */
const handleDeleteOneLink = (id, farther, sonIndex) => {
    ElMessageBox.confirm('是否删除当前联动关系?', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
        center: true
    })
        .then(() => {
            let events = farther.linkageSetting.events;
            events.splice(sonIndex, 1);
            //组合的时候修改子集
            getIdAndEditIt(useComponentConfigStore.pageConfig.list, id, 'setups', {
                linkageSetting: {
                    ...farther.linkageSetting,
                    events
                }
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled'
            });
        });
};

/**
 * @description:建立关联关系和取消关联关系
 * @return {*}
 */
const handleRelieveOneLink = (id, farther, sonIndex, son) => {
    console.log('建立关联关系和取消关联关系', id, farther, son, sonIndex);
    // console.log(farther.linkageSetting.events, 1111111, events);
    let events = farther.linkageSetting.events;
    events[sonIndex].linkageStatus = !events[sonIndex].linkageStatus;
    getIdAndEditIt(useComponentConfigStore.pageConfig.list, id, 'setups', {
        linkageSetting: {
            ...farther.linkageSetting,
            events
        }
    });
    //组合的时候修改子集
};
</script>
<style scoped lang="scss">
.global-linkage {
    padding: 0.16rem 0.24rem;
    .el-right-icon {
        cursor: pointer;
    }
    li {
        margin-bottom: 0.06rem;
    }
    .icon-a-icon-Largescreen {
        margin: 0 0.1rem;
        color: #c9cdd4;
    }
    .first-level {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .left {
            flex: 1;
            display: flex;
            align-items: center;
            width: 0.5rem;
        }
        .select-area {
            width: 2.2rem;
            background: #f2f3f5;
            :deep(.el-input .el-input__wrapper.is-focus) {
                background: #F2F3F5;
            }
        }
    }

    .item-one {
        display: flex;
        padding: 0.06rem;
        justify-content: space-between;
        .label-area {
            display: flex;
            align-items: center;
            margin-left: 0.25rem;
            .circle {
                width: 0.04rem;
                height: 0.04rem;
                background: #e5e6eb;
                border-radius: 50%;
            }
            .icon-a-icon-Largescreen {
                margin-left: 0.2rem;
            }
        }
        .icon-delete {
            margin-right: 0.15rem;
            cursor: pointer;
        }
        .icon-icon-correlation {
            cursor: pointer;
        }
    }
}
</style>
